<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded" class="mar-top-xl">Loading...</div>
      <div ng-if="service">
        <h1 class="contains-actions">
          <div class="pull-right dropdown" ng-hide="!('services' | canIDoAny)">
            <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
              Actions
              <span class="caret"></span>
            </button>
            <a href=""
               class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
               data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
            <ul class="dropdown-menu dropdown-menu-right actions action-button">
              <li ng-if="routesVersion | canI : 'create'">
                <a ng-href="project/{{project.metadata.name}}/create-route?service={{service.metadata.name}}"
                   role="button">Create Route</a>
              </li>
              <li ng-if="servicesVersion | canI : 'update'">
                <a ng-href="{{service | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li ng-if="servicesVersion | canI : 'delete'">
                <delete-link
                  kind="Service"
                  resource-name="{{service.metadata.name}}"
                  project-name="{{service.metadata.namespace}}"
                  alerts="alerts">
                </delete-link>
              </li>
            </ul>
          </div>
          {{service.metadata.name}}
          <small class="meta">created <span am-time-ago="service.metadata.creationTimestamp"></span></small>
        </h1>
        <labels labels="service.metadata.labels" clickable="true" kind="services" project-name="{{service.metadata.namespace}}" limit="3"></labels>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <div class="row" ng-if="service">
        <div class="col-md-12">
          <uib-tabset>
            <uib-tab active="selectedTab.details">
              <uib-tab-heading>Details</uib-tab-heading>
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt>Selectors:</dt>
                  <dd>
                    <span ng-if="!service.spec.selector"><em>none</em></span>
                    <span ng-repeat="(selectorLabel, selectorValue) in service.spec.selector"> {{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></span>
                  </dd>
                  <dt>Type:</dt>
                  <dd>{{service.spec.type}}</dd>
                  <dt>IP:</dt>
                  <dd>{{service.spec.clusterIP}}</dd>
                  <dt>Hostname:</dt>
                  <dd>
                    {{service.metadata.name}}.{{service.metadata.namespace}}.svc
                    <span data-toggle="popover" data-trigger="hover" data-content="{{'This address is only resolvable from within the cluster.'}}" style="cursor: help; padding-left: 5px;">
                      <span class="pficon pficon-info" aria-hidden="true" data-toggle="tooltip" style="cursor: help;"></span>
                    </span>
                  </dd>
                  <dt ng-if-start="service.spec.externalName">External Hostname:</dt>
                  <dd ng-if-end>{{service.spec.externalName}}</dd>
                  <dt>Session affinity:</dt>
                  <dd>{{service.spec.sessionAffinity}}</dd>
                  <dt ng-if-start="service.status.loadBalancer.ingress.length">Ingress Points:</dt>
                  <dd ng-if-end>
                    <span ng-repeat="ingress in service.status.loadBalancer.ingress"
                      >{{ingress.ip}}<span ng-if="!$last">, </span></span>
                  </dd>
                  <dt ng-if-start="service.spec.externalIPs.length">External IPs:</dt>
                  <dd ng-if-end>
                    <span ng-repeat="externalIP in service.spec.externalIPs"
                      >{{externalIP}}<span ng-if="!$last">, </span></span>
                  </dd>
                  <dt ng-if-start="(routesForService | hashSize) == 0">Routes:</dt>
                  <dd ng-if-end>
                    <span>
                      <a ng-href="project/{{project.metadata.name}}/create-route?service={{service.metadata.name}}"  ng-if="routesVersion | canI : 'create'">Create route</a>
                      <span ng-if="!(routesVersion | canI : 'create')"><em>None</em></span>
                    </span>
                  </dd>
                </dl>
                <h3>Traffic</h3>
                <div>
                  <traffic-table ports-by-route="portsByRoute" routes="routesForService" services="services" show-node-ports="showNodePorts" custom-name-header="'Route'"></traffic-table>
                </div>
                <p>
                  Learn more about <a ng-href="{{'route-types' | helpLink}}" target="_blank">routes</a> and <a ng-href="{{'services' | helpLink}}" target="_blank">services</a>.
                </p>
                <h3>Pods</h3>
                <div>
                  <pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="'Pod'" pod-failure-reasons="podFailureReasons"></pods-table>
                </div>
                <annotations annotations="service.metadata.annotations"></annotations>
              </div>
            </uib-tab>
            <uib-tab active="selectedTab.events" ng-if="eventsVersion | canI : 'watch'">
              <uib-tab-heading>Events</uib-tab-heading>
              <events api-objects="[ service ]" project-context="projectContext" ng-if="selectedTab.events"></events>
            </uib-tab>
          </uib-tabset>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
